<template>
  <div class="articles-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <h3>$attrs使用</h3>
        <demo :title="title" :msg="msg"></demo>
        <el-button
          class="filter-item"
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="title++"
          >数字</el-button
        >
        <el-button
          class="filter-item"
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="msg = msg === '男' ? '女' : '男'"
          >性别</el-button
        >
        <hr />
        <child-component
          @click="handleClick"
          @dblclick="handleDoubleClick"
        ></child-component>
      </el-card>
    </div>
  </div>
</template>

<script>
import demo from '../components/demo.vue'
import childComponent from '../components/childComponent'

export default {
  components: {
    demo,
    childComponent
  },
  data () {
    return {
      title: 222,
      msg: '男'
    }
  },
  methods: {
    handleClick () {
      console.log('Clicked!')
    },
    handleDoubleClick () {
      console.log('Double clicked!')
    }
  }
}
</script>

<style scoped lang="scss">
</style>
